/**
 * @description 工具栏：查询组件
 * @author chenyan
 */

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Spin, Select, InputNumber, Row, Col } from 'antd';
import { TableC } from '../../../../../comps';
import style from './index.less';

const { Option } = Select;

@Form.create()
class TradeTableC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: 1, // 当前页码
      numInPage: 10, // 每页数量
      degree: '', // 收益率偏离度
      price: '', // 净价偏离度
      bondID: '', // 债券id
    };
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this);
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    // bondID的变更 更新页码
    if (nextProps.bondID != this.state.bondID) {
      this.setState(
        {
          bondID: nextProps.bondID,
        },
        () => {
          const bondInfo = JSON.parse(sessionStorage.getItem('bondInfo'));
          this.setState(
            {
              degree: bondInfo.degree ? bondInfo.degree : 3,
              price: bondInfo.price ? bondInfo.price : 20,
            },
            () => {
              this.queryTableData();
            },
          );
        },
      );
    }
  }

  // 获取表格信息
  queryTableData = () => {
    const { currentPage, numInPage, price, degree, bondID } = this.state;
    const { type, dateRange } = this.props;
    this.props.dispatch({
      type: 'bondArtificialTradesM/queryBondTradeList',
      payload: {
        currentPage,
        numInPage,
        priceBias: degree,
        yieldBias: price,
        bondID,
        type,
        dateRange,
      },
    });
  };

  // 表格页码变更
  handleTableChange = (current, pageSize) => {
    this.setState(
      {
        currentPage: current,
        numInPage: pageSize,
      },
      () => {
        this.queryTableData();
      },
    );
  };

  // 价格偏度变更事件
  priceChange = (e) => {
    if (!e) return;
    this.setState(
      {
        price: e,
      },
      () => {
        this.queryTableData();
      },
    );
  };

  // 收益率偏度变更事件
  degreeChange = (e) => {
    if (!e) return;
    if (typeof e === 'string') return;
    this.setState(
      {
        degree: e,
      },
      () => {
        this.queryTableData();
      },
    );
  };

  // 工具栏渲染
  renderToolbar() {
    const { degree, price } = this.state;
    const {
      activeKey,
      globalM: {
        dataDictionary: { CREDITBND_MONITOR_BIASBP: priceList = [] },
      },
    } = this.props;
    return (
      <div className={style.main_bg}>
        <Row type='flex' className={style.row_flex}>
          <Col>
            <div className={style.flex_form}>
              <span>
                | 成交-{activeKey} {'| > '}
              </span>
              <Form.Item>
                <Select style={{ width: 80 }} value={price} onChange={this.priceChange}>
                  {priceList.length
                    ? priceList.map((item, i) => (
                        <Option value={item.code} key={i}>
                          {item.value}
                        </Option>
                      ))
                    : null}
                </Select>
              </Form.Item>
              <span>bp</span>
            </div>
          </Col>
          <Col>
            <div className={style.flex_form}>
              <span>
                | 成交-{activeKey} | / {activeKey}
                {' > '}
              </span>
              <Form.Item>
                <InputNumber onChange={this.degreeChange} value={degree} width={80} min={0.01} precision={2} parser={(inValue) => inValue.replace(/\$\s?|(,*)/g, '')} />
              </Form.Item>
              <span>%</span>
            </div>
          </Col>
        </Row>
      </div>
    );
  }

  renderTable = () => {
    const { numInPage, currentPage } = this.state;
    const { loading, columns = [], dataSource = [], total } = this.props;
    columns.map((item) => {
      if (item.key != 'date' && item.key != 'transactionTime' && item.key != 'tradingMarket') {
        item.type = 'number';
        item.toFixed = 4;
        if (item.key == 'price' || item.key == 'amount') {
          item.type = 'money';
        }
      }
    });
    if (dataSource[0] && !dataSource[0].key) {
      dataSource.map((item, key) => {
        item.key = key;
      });
    }
    return (
      <div>
        <Spin spinning={loading.effects['bondArtificialTradesM/queryBondTradeList'] == true}>
          <TableC
            columns={columns || []}
            dataSource={dataSource || []}
            current={currentPage}
            total={total}
            pageSize={numInPage}
            onShowSizeChange={this.handleTableChange} // 每页数量修改时
            onPageChange={this.handleTableChange} // 页码改变调用
            rowKey='key'
          />
        </Spin>
      </div>
    );
  };

  render() {
    return (
      <div>
        {this.renderToolbar()}
        {this.renderTable()}
      </div>
    );
  }
}

export default connect(({ bondArtificialTradesM, loading, globalM }) => ({
  bondArtificialTradesM,
  loading,
  globalM,
}))(TradeTableC);
